<!--
 * @FilePath     : /layui/demo/1558.html
 * @Description  : 分组的点击事件
 * @Date         : 2025-02-24 14:18
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-02-24 14:22
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="" />
  </head>
  <body>
    <div id="demo1" class="xm-select-demo"></div>

    <script src="/xm-select/dist/xm-select.js"></script>
    <script>
      /*
      data 数组内子项中：
        optgroup 字段：用于设置当前是否是分组；
        click 字段：
          {string}  'SELECT' 是设置选中；'CLEAR' 是设置清除；'AUTO' 是选中则取消，取消则选中（一起操作）；
          {function} 函数，参数是
      */
      var demo1 = xmSelect.render({
        el: '.xm-select-demo',
        data: [
          { name: '开始无分组1', value: 11, children: [] },
          { name: '开始无分组2', value: 12, children: [] },
          {
            name: '选中',
            optgroup: true,
            click: 'SELECT',
            children: [
              { name: '张三', value: 1 },
              { name: '李四', value: 2, disabled: true },
            ],
          },
          {
            name: '清空',
            optgroup: true,
            click: 'CLEAR',
            children: [
              { name: '王五', value: 3, disabled: true },
              { name: '苹果', value: 4, selected: true },
            ],
          },
          {
            name: '自动',
            optgroup: true,
            click: 'AUTO',
            children: [
              { name: '香蕉', value: 5 },
              { name: '葡萄', value: 6 },
            ],
          },
          { name: '中间无分组1', value: 21, children: [] },
          { name: '中间无分组2', value: 22, children: [] },
          {
            name: '自定义',
            optgroup: true,
            click: function (item) {
              console.log('xx', item)
              alert('自定义的, 想干嘛干嘛')
            },
            children: [
              { name: '小米', value: 7 },
              { name: '华为', value: 8 },
            ],
          },
          { name: '结尾无分组1', value: 31, children: [] },
          { name: '结尾无分组2', value: 32, children: [] },
        ],

        //
      })
    </script>
  </body>
</html>
